<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-1"> </view>
      <view class="section-0">
        <view class="section-body">
          <view class="form">
            <view class="form-item">
              <view class="label">单体工程</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="单体工程"
                  v-model="form.name"
                ></u--input>
              </view>
            </view>
			<view class="form-item">
			  <view class="label">分部分项工程</view>
			  <view class="shape"></view>
			  <view class="input">
			    <u--input
			      placeholderClass="input-placeholder"
			      class="input-body"
			      placeholder="分部分项工程"
			      v-model="form.name"
			    ></u--input>
			  </view>
			</view>
            <view class="actions">
              <view class="action" @click="handleResetForm()">
                <text>重</text>
                <text>置</text>
              </view>
              <view class="action search" @click="handleSearch()">
                <text>查</text>
                <text>询</text>
              </view>
            </view>
          </view>

          <view class="list">
            <view
              class="wrapper"
              v-for="(item2, index) in contentList"
              :key="index"
              @click="go(item2)"
            >
              <view class="title">
                <span class="workmanshipIndex">序号：{{ index + 1 }} </span>
                <span class="workmanshipNumber"
                  >工艺编号：{{ item2.number }}</span
                >
                <span class="edit">
                  <span class="iconfont icon-bianji1"></span>
                </span>
              </view>
              <view class="value">
                <view class="workmanshipLeft">
                  <text class="pictureTop">暂无</text>
                  <text class="pictureBottom">图片</text>
                  <img :src="item2.file_path" class="usimg" />
                </view>
                <view class="workmanshipRight">
                  <view class="workmanshipName">
                    工艺名称：{{ item2.name }}
                  </view>
                  <view class="workmanshipType"> 类型：{{ item2.type }} </view>
                  <view v-if="item2.file_path == null"> 状态：未完成</view>
                  <view v-if="item2.file_path != null"> 状态：已完成</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { StandardProcessListApi } from "@/api/statistics.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      form: {
        name: "",
      },
      id: "",
      project_name: "",
      curBoard: 1,
      list: [],
      pageSize: 20,
      contentList: [],
      expandList: [],
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
    };
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },
  methods: {
    setCurBoard(item) {
      if (!item.state) return;
      this.curBoard = item.state;
      uni.showLoading({
        title: "加载中。。。",
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 500);
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    go(item) {
      let params = {
        id: item.id,
        project_id: item.project_id,
        number: item.number,
        name: item.name,
        type: item.type,
        status: item.status,
        file_path: item.file_path,
        file_id: item.file_id,
      };
      uni.navigateTo({
        url:
          "/pages/statistics/quality/workmanship/processEditor?params=" +
          JSON.stringify(params),
      });
    },
    onNavigationBarButtonTap() {
      uni.navigateTo({
        url: "/pages/statistics/quality/workmanship/processEditor",
      });
    },
    handleResetForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    handleSearch() {
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*上拉加载的回调*/
    async upCallback(page) {
      const { data } = await StandardProcessListApi({
        ...this.form,
        id: this.id,
        name: this.form.name,
        page: page.num,
        pageSize: this.pageSize,
      });
      console.log(data.data.data);
      // this.contentList = data.data.data;
      if (data.code === 1 && data.data.length != 0) {
        // 接口返回的当前页数据列表 (数组)
        let arr = [];
        for (let key in data.data.data) {
          arr.push(data.data.data[key]);
        }
        let curPageData = arr;
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        let totalPage = data.data.data.last_page;
        // 设置列表数据
        if (page.num == 1) this.contentList = []; //如果是第一页需手动置空列表
        this.contentList = this.contentList.concat(curPageData); //追加新数据
        // console.log('list',this.list)
        // 请求成功,隐藏加载状态
        this.mescroll.endByPage(curPageLen, totalPage);
        setTimeout(() => {
          this.mescroll.endSuccess(curPageLen);
          // this.mescroll.endSuccess(1);
        }, 20);
      } else {
        //  请求失败,隐藏加载状态
        this.mescroll.endErr();
      }
    },
    onLoad() {
      this.id = this.curProject.id;
      uni.$on("refreshData", () => {
        this.mescroll.resetUpScroll();
      });
    },
    // onShow() {
    //   this.mescroll.resetUpScroll();
    // },
  },
};
</script>

<style lang="scss" scoped>
.out-content {
  background-color: #2e5efe;
  .section-1 {
    width: 100%;
    background-color: #1534ce;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;

    .section-body {
      width: 670rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-bottom: 50rpx;
      padding-top: 20rpx;
      background-color: #1534ce;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;

      .item {
        width: 50%;
        float: left;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100rpx;
        position: relative;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .shape {
          width: 4rpx;
          height: 84rpx;
          background-image: linear-gradient(
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          right: 0;
          top: 28rpx;
        }

        .shape2 {
          height: 4rpx;
          width: 172rpx;
          background-image: linear-gradient(
            90deg,
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          bottom: -2rpx;
        }

        .top {
          width: 100%;
          text-align: center;
          font-size: 16rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #95c4fa;
        }

        .bottom {
          width: 100%;
          text-align: center;
          font-size: 58rpx;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffde00;

          text {
            font-size: 26rpx;
            font-weight: normal;
            letter-spacing: 0rpx;
            color: #87c6ff;
          }
        }
      }
    }
  }
}

.wrapper {
  width: 100%;
  border-radius: 35rpx;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
  padding: 28rpx 40rpx;
  padding-top: 15rpx;
  margin-bottom: 40rpx;
  font-size: 27rpx;
  .title {
    display: flex;
    justify-content: space-between;
    margin-top: 13.5rpx;
    margin-bottom: 38rpx;
    .workmanshipIndex {
      margin-left: 10rpx;
    }
    .workmanshipNumber {
      flex: 0.975;
      margin-left: 92rpx;
    }

    .edit {
      color: #0535d6;
      // margin-left: 71rpx;
    }
  }
  .workmanshipLeft {
    position: relative;
    border: 2rpx solid #efefef;
    width: 134rpx;
    height: 113rpx;
    position: absolute;
    margin-top: -11.5rpx;
    padding-top: 19rpx;
    background: #efefef;
    border-radius: 19rpx;
    .usimg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      width: 134rpx;
      height: 134rpx;
      border: none;
      border-radius: 19rpx;
    }
    .pictureTop {
      color: #b8b8b8;
      margin-top: 10px;
      overflow: hidden;
      margin-left: 29rpx;
      font-size: 38rpx;
    }
    .pictureBottom {
      color: #b8b8b8;
      margin-left: 29rpx;
      font-size: 38rpx;
    }
  }
  .workmanshipRight {
    margin-left: 195rpx;
  }
}
.section-0 {
  width: 100%;
  position: relative;
  top: -50rpx;
  z-index: 10;
  background-color: #2e5efe;
  .section-body {
    width: 100%;
    height: 100%;
    margin-top: 50rpx;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
    padding-top: 46rpx;
    .form {
      width: 100%;
      padding: 0 42rpx;
      padding-top: 15rpx;
      box-sizing: border-box;

      .form-time {
        width: 662rpx;
        min-height: 48rpx;
        margin: 0 auto;
        margin-bottom: 9rpx;

        @include clear;
        .label {
          float: left;
          width: 200rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #1534ce;
        }
        .wrapper {
          float: left;
          width: calc(100% - 134rpx);
          line-height: 48rpx;
          .item {
            float: left;
            display: inline-block;
            height: 48rpx;
            border-radius: 35rpx;
            padding: 0 20rpx;
            background-color: #395cf5;
            text-align: center;
            font-size: 26rpx;
            line-height: 48rpx;
            color: #fff;
            margin-left: 10rpx;
            transition: 0.3s ease;
            margin-bottom: 16rpx;
          }
          .item__active {
            background-color: #1534ce;
          }
        }
      }
      .form-item {
        width: 662rpx;
        height: 48rpx;
        border-radius: 20rpx;
        border: solid 2rpx #1534ce;
        margin: 0 auto;
        margin-bottom: 25rpx;
        &:last-child {
          margin-bottom: 34rpx;
        }
        @include clear();
        .label {
          float: left;
          width: 134rpx;
          height: 48rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #1534ce;
        }
        .shape {
          width: 3rpx;
          height: 32rpx;
          background-color: #7f98ae;
          float: left;
          margin-top: 8rpx;
        }
        .input {
          float: left;
          width: calc(100% - 134rpx - 3rpx);
          .input-body {
            box-sizing: border-box;
            width: 100%;
            height: 44rpx;
            padding: 0 !important;
            border: none;
            padding-left: 30rpx !important;
            padding-right: 30rpx !important;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.7);
          }
          .input-placeholder {
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: rgba(0, 0, 0, 0.5);
          }
        }
      }
    }

    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;
      .item {
        width: 50%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;
        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;
          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }
        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;
          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }
      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;
        .label {
          color: #46464a;
        }
        .shape {
          display: block;
        }
        .shape-mirrow {
          display: none;
        }
      }
      .item__active_next {
        border-bottom-right-radius: 50rpx;
        .shape {
          display: none;
        }
        .shape-mirrow {
          display: block;
        }
      }
    }
    .list {
      width: 670rpx;
      box-sizing: border-box;
      margin-left: 40rpx;

      .item {
        width: 100%;
        border-bottom: solid 2rpx #f2f2f0;

        .parent {
          width: 100%;
          @include clear();
          .name {
            width: 620rpx;
            line-height: 30rpx;
            padding: 26rpx 0;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;

            margin-left: 67rpx;
            letter-spacing: 2rpx;
            color: #3b3c40;
            word-break: break-all;
          }

          .count {
            float: right;
            min-width: 46rpx;
            height: 46rpx;
            margin-top: 18rpx;
            border-radius: 28rpx;
            line-height: 46rpx;
            text-align: center;
            font-size: 26rpx;
            font-weight: bold;
            color: #395cf5;
            background: #ffde00;
            // margin-right: 40rpx;
            text {
              font-size: 16rpx;
            }
          }

          .action {
            float: left;
            width: 32rpx;
            margin-right: 18rpx;
            height: 100%;
            line-height: 0rpx;
            color: #3b3c40;
            .iconfont {
              position: relative;
              top: 38rpx;
              font-size: 32rpx;
              transition: 0.2s ease;
              transform: rotate(90deg);
            }
          }
        }

        .child {
          width: 750rpx;
          margin-left: -40rpx;
          background: #f2f2fa;

          .child-item {
            width: 620rpx;
            margin-left: 90rpx;
            border-bottom: 2rpx solid #e3e8f5;

            &:last-child {
              border-bottom: none;
            }

            .top {
              width: 100%;
              overflow: hidden;
              height: 100rpx;
              margin-left: 15.3rpx;

              .name {
                float: left;
                width: calc(100% - 40rpx);
                height: 40rpx;
                line-height: 40rpx;
                color: #3b3c40;
                font-size: 26rpx;
                padding: 30rpx 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }

              .action {
                width: 40rpx;
                height: 100rpx;
                line-height: 100rpx;
                float: right;
                text-align: right;
                .iconfont {
                  font-size: 32rpx;
                  color: #7f98ae;
                }
              }
            }
          }
        }
      }

      .item__expand {
        .parent {
          .action {
            .iconfont {
              transform: rotate(-90deg);
            }
          }
        }

        .child {
          box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.03) inset;
        }
      }
    }

    .actions {
      width: 100%;
      height: 50rpx;
      margin-top: 29rpx;
      padding-bottom: 40rpx;
      display: flex;
      justify-content: space-between;

      .action {
        width: 288rpx;
        height: 48rpx;
        background-color: #395cf5;
        border-radius: 20rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 48rpx;
        color: #ffffff;

        text {
          &:first-child {
            margin-right: 20rpx;
          }
        }
      }

      .search {
        background-color: #1534ce;
      }
    }

    .total {
      box-sizing: border-box;
      padding: 0 70rpx;
      height: 80rpx;
      line-height: 70rpx;
      font-size: 22rpx;
      font-weight: normal;
      font-stretch: normal;
      line-height: 80rpx;
      letter-spacing: 0rpx;
      color: #3b3c40;
    }

    .charts {
      width: 100%;
      box-sizing: border-box;
      height: 315rpx;
      padding: 0 70rpx;
      padding-left: calc(70rpx - 15px);
      margin-bottom: 30rpx;
      #echarts {
        width: 100%;
        height: 100%;
      }
    }

    .top-tab {
      width: 670rpx;
      margin-left: 40rpx;
      height: 52rpx;
      line-height: 52rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 30rpx;
      margin-top: 15rpx;
      border-bottom: solid 3rpx #f2f2f0;

      .item {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 50rpx;
        letter-spacing: 0rpx;
        color: #d8d8d5;
        position: relative;

        .shape {
          opacity: 0;
          transform: translateY(6rpx);
          position: absolute;
          bottom: -6rpx;
          width: 100%;
          height: 8rpx;
          background-color: #1534ce;
          border-radius: 8rpx;
          transition: 0.3s ease;
        }
      }

      .item__active {
        color: #3b3c40;

        .shape {
          opacity: 1;
          transform: translateY(0rpx);
        }
      }
    }
  }
}
</style>
